import { Component } from 'react';

import { Button,Boxs,Table,Group,Toast,DatetimeField,Datetime,SelectField,TextareaField,TextField,PhotoField,EmployeeField} from 'saltui';
const { HBox, Box,VBox} = Boxs;
import DB from '../../../../app/db';
import {nodataIcon } from '../../../../app/variables';
import OptionChecked from 'salt-icon/lib/OptionChecked';

const {Count} = TextareaField;


export default class PageHome extends Component {
  constructor(props) {
    super(props);
    this.state = {

      quesId : this.props.quesId,//问卷id
      quesType : '',//问卷类型
      //表头
      columns : [
        { dataKey: 'option', title: '选项', align: 'center' },
        { dataKey: 'totail', title: '小计', align: 'center' },
        { dataKey: 'percent', title: '比例', align: 'center' },
      ],

      //
      //所有需要列表展示百分比的题型
      tableDataTypeArr :['sinselect','multiselect','check','scale','trueOrFalse'],
      // ,'mulscale'
      //所有需要展示详情的题型
      detailDataTypeArr : ['fillInBlanks','answer','field','shortAnswer'],
      //表数据
      data:[],
      //矩阵量表的数据  数据结构[[{data:data,title:title},{}],[...]]
      mulscaleData:[],
      //题目显示数据
      topicSet:[],
    };
    //设置标题
    dd.biz.navigation.setTitle({
      title: '问卷统计',
      onSuccess: function(result) {},
      onFail: function() {}
    });
  }
  // 新值和事件对象
  handleChange(field,value) {
    this.setState({ [field]:value });

  }

  componentDidMount() {
    let t = this;
    DB.QuesModuleAPI.getStatistics({quesId:t.state.quesId}).then((content) => {
      Toast.show({
        type:'loding',
        content: '正在初始化数据',
      });
      if(content.type == 'success'){
        let quesType = content.data.entity.type;
        //所有表格数据（除矩阵）
        let data = [];
        //矩阵量表集合
        let mulscaleData = [];
        //所有题目集合
        let topicSetting = content.data.topicSetting;
        // let topicAnswerNum = content.data.topicAnswerNum;
        if(topicSetting != null && topicSetting.length > 0){
          //遍历所有题目  把表格的数据取出来
          for (let i = 0; i < topicSetting.length; i++) {
            let topicSet = topicSetting[i];
            //每一个矩阵量表中表格
            let mArr = [];
            //单独处理矩阵量表表格数据
            if(topicSet.topicType == 'mulscale'){
              let list = topicSet.list;

                //遍历得到每一个矩阵量表的数据
                for (let k = 0; k < list.length; k++) {
                  let optionSet = list[k].list;
                  let data = [];
                  for (let l = 0; l < optionSet.length; l++) {
                    let optionList = optionSet[l];
                    let json = {'option':optionList.childOption,'totail':optionList.optionNum,'percent':optionList.proportion};
                    data.push(json);
                  }
                  let mArrOne = {'title':list[k].name,'data':data};
                  mArr.push(mArrOne);
                }
            }
            mulscaleData.push(mArr);

            //单个表格数据
            let tableData = [];
            if($.inArray(topicSet.topicType, t.state.tableDataTypeArr)>=0){
              let list = topicSet.list;
              for (let j = 0; j < list.length; j++) {
                let name = list[j].name;
                if(topicSet.settingMap.ezQuABC == '1'){
                  name = list[j].letter + "、" + name;
                }
                if(quesType == 'questionnaireExam' && list[j].mapSet.isRightAnswer == '1'){
                  name = (
                    <HBox vAlign="center">
                      <Box>{name}</Box>
                      <div className="checked t-checkbox-field-icon-list t-BCsuccess t-ML10">
                        <OptionChecked fill="#fff" width="14px"/>
                      </div>
                    </HBox>
                  );
                }else{
                  name = (
                    <HBox vAlign="center">
                      <Box>{name}</Box>
                    </HBox>
                  );
                }
                //当个表格的单个数据
                let tableDataOne = {'option':name,'totail':list[j].mapProp.optionNum,'percent':list[j].mapProp.proportion};
                tableData.push(tableDataOne);

              }
            }
            data.push({'data':tableData});
          }
        }
        t.setState({
          quesType: quesType,
          topicSet : topicSetting,
          data:data,
          mulscaleData:mulscaleData
        })
      }
      Toast.hide();
    }).catch();
  }

  //根据optionId 查找题目下的答案——链接
  detail(topicId,quesId,topicType){
    location.hash = 'questionnaire/detailInfo/' + quesId + "/" + topicId + "/" + topicType+ "/" + this.state.quesType;
  }

  render(){
    const t = this;
    function typeName (type){
      switch (type) {
        case 'sinselect': 
          if(t.state.quesType == 'questionnaireVote') return '投票单选';
          else if(t.state.quesType == 'questionnaireSurvey') return '普通单选';
        case 'multiselect': 
          if(t.state.quesType == 'questionnaireVote') return '投票多选';
          else if(t.state.quesType == 'questionnaireSurvey') return '普通多选';
        case 'check': return '下拉框';
        case 'scale': return '量表';
        case 'mulscale': return '矩阵量表';
        case 'fillInBlanks': return '多项填空';
        case 'answer': return '单项填空';
        case 'field': return '上传附件';

      }
    }
    let winHeight = getScrollHigh(0,0,0);
    return (
      <div>
        {t.state.topicSet!=null&&t.state.topicSet!=''?t.state.topicSet.map((value,key)=>(
          
          <div>
            {$.inArray(value.topicType, t.state.tableDataTypeArr)>=0?(
              <Box className="t-BCf t-P16 t-FS16 t-MB10">
                <Box flex={1} className="t-PR10 t-LH1_4 t-PR">
                  <span className={value.settingMap.willAnswer == "1" ? "dd-required" : ""}>{key+1}.</span>
                  <span className="t-FC3" dangerouslySetInnerHTML={{__html: value.topicNameTxt}}>
                  </span>
                  <span className="t-FCddfontblue-40 t-WBk">【{t.state.quesType == 'questionnaireExam' ? value.topicScore+"分" : typeName(value.topicType)}】</span>
                </Box>
                {t.state.quesType == 'questionnaireExam' ? 
                  <HBox className="t-MT6">
                    <Box className="t-FCred">正确率:</Box>
                    <Box className="t-FCred t-ML6">{value.accuracy}</Box>
                  </HBox>
                  :
                  ""
                }
                <Box className="t-MT8">
                  <div >
                    <table className="t-BCf dd-table grey">
                      <thead>
                      <tr>
                        <th>选项</th>
                        <th>小计</th>
                        <th>比例</th>
                      </tr>
                      </thead>
                      <tbody>
                      {this.state.data[key].data.map((item, index) => (
                        <tr>
                          <td className="t-WB">{item.option}</td>
                          <td>{item.totail}</td>
                          <td>{item.percent}</td>
                        </tr>
                      ))}
                      </tbody>
                    </table>
                  </div>
                </Box>
                {/* <HBox className={value.isScore=='0' && (value.topicType == 'scale' || value.topicType == 'mulscale') ?"t-MT10":"t-DN"}>
                  <Box>平均分:</Box>
                  <Box className="t-FCorange t-ML6">{value.realAverageScore}</Box>
                </HBox> */}
              </Box>
            ):""}

            {$.inArray(value.topicType, t.state.detailDataTypeArr)>=0?(
              <Box className="t-BCf t-P16 t-FS16 t-MB10">
                <Box flex={1} className="t-LH1_4 t-PR10 t-PR">
                  <span className={value.settingMap.willAnswer == "1" ? "dd-required" : ""}>{key+1}.</span>
                  <span className="t-FC3" dangerouslySetInnerHTML={{__html: value.topicNameTxt}}></span>
                  <span className="t-FCddfontblue-40 t-WBk">【{t.state.quesType == 'questionnaireExam' ? value.topicScore+"分" : typeName(value.topicType)}】</span>
                </Box>
                {t.state.quesType == 'questionnaireExam' ? 
                  <div>
                    <HBox className="t-MT6">
                      <Box className="t-FCred">正确率:</Box>
                      <Box className="t-FCred t-ML6">{value.accuracy}</Box>
                    </HBox>
                    {value.topicType != 'shortAnswer' && value.topicType != 'field' ?
                      <HBox vAlign="top" className="t-MT12">
                        <Box className="t-MR10">
                          <div className="checked t-checkbox-field-icon-list t-BCsuccess">
                            <OptionChecked fill="#fff" width="14px"/>
                          </div>
                        </Box>
                        <HBox vAlign="top" flex="1" className="t-LH1_3">
                          <Box>正确答案：</Box>
                          <Box flex={1}>
                          {value.topicType == 'fillInBlanks' ? 
                            value.list.map(function(ele,i){
                              return(
                                <Box>{ele.name}:{ele.mapSet.answer}</Box>
                              )
                            })
                          :
                            <Box flex={1}>{value.settingMap.answer}</Box>
                          }
                          </Box>
                        </HBox>
                      </HBox> : ''
                    }
                    
                  </div>
                  :
                  ""
                }
                {
                  value.topicType=='field'||value.topicType=='fillInBlanks'||value.topicType=='answer'||value.topicType=='shortAnswer'?
                  <Box className="t-FCddblue t-MT8" onClick={t.detail.bind(t,value.id,value.questionnaireId,value.topicType)}>查看详细信息</Box>:""
                }
              </Box>
            ):""}

            {value.topicType == 'mulscale'?(
              <Box className="t-BCf t-P16 t-FS16 t-MB10">
                <Box flex={1} className="t-PR10 t-LH1_4 t-PR">
                  <span className={value.settingMap.willAnswer == "1" ? "dd-required" : ""}>{key+1}.</span>
                  <span className="t-FC3" dangerouslySetInnerHTML={{__html: value.topicNameTxt}}></span>
                  <span className="t-FCddfontblue-40 t-WBk">【{typeName(value.topicType)}】</span>
                </Box>
                {
                  t.state.mulscaleData[key].length > 0 ?
                    t.state.mulscaleData[key].map((mulscale,index)=>(
                      <Box className="t-MT8">
                        <div className="t-MB8 t-FS14">{mulscale.title}</div>
                        <div >
                          <table className="t-BCf dd-table grey">
                            <thead>
                            <tr>
                              <th>选项</th>
                              <th>小计</th>
                              <th>比例</th>
                            </tr>
                            </thead>
                            <tbody>
                            {mulscale.data.map((item, index) => (
                              <tr>
                                <td className="t-WB">{item.option}</td>
                                <td >{item.totail}</td>
                                <td >{item.percent}</td>
                              </tr>
                            ))}
                            </tbody>
                          </table>
                        </div>
                      </Box>
                    )) :""
                }

                {/* <HBox className={value.isScore=='0' && (value.topicType == 'scale' || value.topicType == 'mulscale') ?"t-MT10":"t-DN"}>
                  <Box>平均分:</Box>
                  <Box className="t-FCorange t-ML6">{value.realAverageScore}</Box>
                </HBox> */}
              </Box>
            ):""}
          </div>


          )
        ):<VBox vAlign="center" hAlign="center" style={{height:winHeight}}>
              <Box>
                <div>
                  <img src={nodataIcon} alt="" style={{width: 68 + 'px'}} />
                </div>
              </Box>
              <Box className="nodata-box t-FC6"> 
                  暂无数据
              </Box>
           </VBox> 
        }

      </div>
    )
  }
}
